<style lang="scss" scoped>
  .wrap{height: 100%}
  $menu-bg:#32323a;/*菜单背景色*/
  $menu-item-cur:rgb(45, 175, 203);/*选中的菜单的背景色*/
  $menu-item-border-color:#666;/*菜单项的边框色*/
  $menu-text-color:#fff;/*二级菜单字体颜色*/
  $menu-arrow-color:#999;/*右箭头颜色*/
  $menu-link-color:#b5b5b5;/*三级菜单字体颜色*/
  $menu-link-active-color:#ffd04b;/*三级菜单字体选中颜色*/
  
  .side{width:200px;background:$menu-bg;position:relative;z-index:9;}
  .logo{height:60px;overflow:hidden;}
  .menu-box{top:60px;left:0;right:0;bottom:0;overflow:auto;border-top:solid 1px $menu-item-border-color;}
  .menu-item{border-bottom:solid 1px $menu-item-border-color;position:relative;}
  .menu-item .arrow{color:$menu-arrow-color}
  .side-menu-title{    height: 55px;
    padding: 0 30px;
    color: $menu-text-color;
  }
  // .side-menu-title:hover,
  .side-menu-title.cur{background:$menu-item-cur;}
  .side-menu-name{margin-left:8px;height:45px;display: block;overflow:hidden;line-height:45px;}
  .side-menu-icon{width:20px;height:40px;}
  .submenu{background:$menu-item-cur;overflow: hidden;position: relative;top:0;left:0;padding-bottom: 0px!important}
  .submenu-link{display: block;height:40px;line-height:35px;padding:0 20px 0 48px;color:$menu-link-color;background: #17191b}
  // .submenu-link:hover,
  .submenu-link.cur{color:$menu-link-active-color}
  .header{height:70px;padding-right:20px;background-color:#fff;}
  .toggle-icon{width:60px;height:60px;}
  .toggle-icon i{font-size:24px;}
  .avatar{width:30px;height:30px;border-radius:100%;margin-right:8px;}
  .power-off{margin-left:20px;}
  .power-off i{font-size:24px;}
  .content{top:10px;left:0;right:0;bottom:0;overflow-y:auto;box-sizing: border-box;padding:20px 20px 0 20px;}
  .slide-fade-enter, .slide-fade-leave-active {
    transform: translateX(10px);
    opacity: 0;
  }
  .logo-normal {
    width: 200px;
    height: 60px;
  }
  .left-side{
    padding-left: 22px;
    line-height: 70px;
    font-size: 28px;
  }
</style>
<style>
.el-menu--horizontal>.el-menu-item {
    float: left;
    height: 60px;
    line-height: 60px;
    margin: 0;
    border-bottom: 2px solid transparent;
    color: #909399;
}
</style>
<template>
  <div class="flex flex-col full-height grey-bg">
    <div class="header border-bottom flex flex-justify-between">
      <div class="left-side flex flex-child-align-end full-height">
        <!-- <div class="logo logo-normal"></div> -->
        <span>等位小程序后台管理</span>  
      </div>
      <div class="right-side flex flex-justify-between flex-align-center" style="color:#999">
        <div class="flex flex-center" >
          <span></span>
          <span >[当前用户]:&nbsp;taoyouyou</span>
        </div>
        <a href="javascript:;" class="power-off" style="color:#eee" @click="signOut">
          <i class="fa fa-sign-out"></i>
        </a>
      </div>
    </div>
    <div class="flex flex-child-average">
      <el-menu
        :collapse="isCollapse"
        :default-active="activeKey.toString()"
        class="el-menu-vertical-demo"
        background-color="#545c64"
        text-color="#fff"
        @select="select"
        active-text-color="#ffd04b">
        <div v-for="item in menu" :key="item.id" style="width:200px;">
          <el-submenu v-if="item.subs" :index="item.id.toString()">
            <template slot="title" class="flex flex-align-center">
              <i :class="item.icon?'fa fa-lg ' +item.icon:''"></i>
              <span slot="title">{{item.name}}</span>
            </template>
            <el-menu-item :index="subItem.id.toString()" v-for="subItem in item.subs" :key="subItem.id" @click.native="goPath(subItem.path,subItem.id)">{{subItem.name}}</el-menu-item>
          </el-submenu>
          <el-menu-item :index="item.id.toString()" v-else @click.native="goPath(item.path,item.id)">
            <template slot="title" class="flex flex-align-center">
              <i :class=" item.icon?'fa fa-lg ' +item.icon:''"></i>
              <span slot="title">{{item.name}}</span>
            </template>
          </el-menu-item>
        </div>
      </el-menu>
      <div class="main flex-child-grow relative">
        <div class="content absolute">
          <transition name="fade">
            <router-view></router-view>
          </transition>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        isCollapse: false,
        activeKey: sessionStorage.getItem('activeKey').toString(),
        menu: [],
      }
    },
    created () {
      // this.activeKey = this.$route.path
      this.fetchUser()
      this.loadMenu()
    },
    methods: {
      fetchUser(){
        const self = this
        self.$api.user.get().then(res=> {
        })
      },
      loadMenu () {
        const self = this
        const path = self.activeKey
        self.$api.menu.getAll().then(res => {
          if(res.code === 0){
            self.menu = res.data.menu
          }
        }, err => {
          self.$message.error('获取数据失败' + err)
        })
       
      },
      select(index, keyPath) {
        const self = this
        console.log(index, keyPath)
      },
      goPath (path, key, name) {
        // this.activeKey = key
        sessionStorage.setItem('activeKey', key)
        this.$store.commit('setActiveKey', key)
        this.$router.push(path)
      },
      signOut () {
        const self = this
        window.sessionStorage.removeItem('token')
        window.sessionStorage.removeItem('publicKey')
        self.$store.commit('setToken', '')
        self.$store.commit('setPublicKey', '')
        self.$router.push('/login')
      }
    }
  }
</script>

